<template>
	<view>
		<view class="bg">
			<view class="user">
				<view class="avatar"></view>
				<p><b>简希</b></p>
				<view class="store_focus">
					<view class="store">
						<b>15</b><br />
						<b>我的收藏</b>
					</view>
					<view class="store">
						<b>31</b><br />
						<b>关注品牌</b>
					</view>
				</view>
			</view>
		</view>
		<view class="my_order">
			<u-cell-group :border="false">
				<u-cell :border="false" title="我的订单" value="全部订单" isLink url=""></u-cell>
			</u-cell-group>
			<view class="order_list">
				<navigator v-for="item in order_icon" :key="item.icon" :url="item.url">
					<u--image :src="item.icon" width="50rpx" height="50rpx"></u--image>
					<view>{{item.title}}</view>
				</navigator>
			</view>
		</view>
		<view class="my_asset">
			<u-cell-group :border="false">
				<u-cell :border="false" title="我的资产"></u-cell>
			</u-cell-group>
			<view class="order_list">
				<view v-for="item in asset_icon" :key="item.icon">
					<u--image :src="item.icon" width="50rpx" height="50rpx"></u--image>
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="tools">
			<u-cell-group :border="false">
				<u-cell :border="false" title="工具"></u-cell>
			</u-cell-group>
			<view class="order_list">
				<navigator v-for="item in tools_icon" :key="item.icon" :url="item.url">
					<u--image :src="item.icon" width="50rpx" height="50rpx"></u--image>
					<view>{{item.title}}</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_icon: [
					{ icon: '../../../static/img/center/icon-1.jpg', title: '待付款', url: '../order/order' },
					{ icon: '../../../static/img/center/icon-2.jpg', title: '待发货', url: '../order/order' },
					{ icon: '../../../static/img/center/icon-3.jpg', title: '待收货', url: '../order/order' },
					{ icon: '../../../static/img/center/icon-4.jpg', title: '待评价', url: '../order/order' },
					{ icon: '../../../static/img/center/icon-5.jpg', title: '售后', url: '../order/order' },
				],
				asset_icon: [
					{ icon: '../../../static/img/center/icon-6.jpg', title: '优惠券' },
					{ icon: '../../../static/img/center/icon-7.jpg', title: '钱包' },
					{ icon: '../../../static/img/center/icon-8.jpg', title: 'D币' },
					{ icon: '../../../static/img/center/icon-9.jpg', title: '红包' },
				],
				tools_icon: [
					{ icon: '../../../static/img/center/icon-10.jpg', title: '会员中心' },
					{ icon: '../../../static/img/center/icon-11.jpg', title: '收获地址', url: '../address/list/list' },
					{ icon: '../../../static/img/center/icon-12.jpg', title: '售后&客服' },
					{ icon: '../../../static/img/center/icon-13.jpg', title: '设置', url: '../settting/settting' },
					{ icon: '../../../static/img/center/icon-14.jpg', title: '入驻合作' },
					{ icon: '../../../static/img/center/icon-15.jpg', title: '反馈&投诉' },
					{ icon: '../../../static/img/center/icon-16.jpg', title: '商品报告' },
					{ icon: '../../../static/img/center/icon-17.jpg', title: '关于我们' },
				]
			}
		},
		onLoad() {
			if (uni.getStorageSync('token')) {} else {
				uni.navigateTo({
					url: '../../login/login'
				});
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.bg {
		width: 750rpx;
		height: 400rpx;
		position: relative;
		background: url(../../../static/img/center/bg.jpg);
		background-size: cover;

		.user {
			width: 690rpx;
			height: 242rpx;
			position: absolute;
			left: 30rpx;
			bottom: -45rpx;
			box-shadow: 0 5rpx 30rpx 0 rgba(0, 0, 0, 0.2);
			background-color: white;

			.avatar {
				width: 128rpx;
				height: 128rpx;
				position: absolute;
				top: -83rpx;
				left: 50%;
				transform: translateX(-50%);
				background-color: white;
				border-radius: 50%;
				background: url(../../../static/img/center/avatar.png);
				background-size: cover;
				box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.2);
			}

			p {
				padding-top: 60rpx;
				padding-bottom: 30rpx;
				text-align: center;
				font-size: 34rpx;
			}

			.store_focus {
				width: 460rpx;
				margin: 0 auto;
				display: flex;
				font-size: 28rpx;
				justify-content: space-between;

				.store {
					text-align: center;
				}
			}
		}
	}

	.my_order {
		padding: 50rpx 0;
		font-size: 24rpx;
		border-bottom: 1rpx solid #eee;

		.order_list {
			margin: 0 38rpx;
			display: flex;
			justify-content: space-between;

			view {
				display: flex;
				flex-direction: column;
				align-items: center;

				view {
					margin-top: 25rpx;
				}
			}
		}
	}

	.my_asset {
		padding: 50rpx 0;
		font-size: 24rpx;
		border-bottom: 1rpx solid #eee;

		.order_list {
			margin: 0 56rpx;
			display: flex;
			justify-content: space-between;

			view {
				display: flex;
				flex-direction: column;
				align-items: center;

				view {
					margin-top: 25rpx;
				}
			}
		}
	}

	.tools {
		padding: 50rpx 0;

		border-bottom: 1rpx solid #eee;

		.order_list {
			margin: 0 10rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			view {
				width: 160rpx;
				margin-top: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				navigator {
					font-size: 12rpx !important;
					margin-top: 25rpx;
				}
			}
		}
	}
</style>